import React, { Component } from 'react'
import '@/assets/css/bootstrap.min.css'
import { connect } from 'react-redux'
import * as userActions from '../../store/actions/userAction'

// 表单验证
import { addUserValidate } from '../../utils/validator/userValidate'
// 参2 把redux中的action方法 映射到 当前组件中的 props中
@connect(null, userActions)
class Add extends Component {

  constructor(props) {
    super(props);
    this.state = {
      // 初始值爱好
      hobbies: ['a', 'b', '看书', '交友', '写代码'],
      // 错误提示
      errors: {},
      // 用户数据源
      userinfo: {
        username: '',
        password: '',
        sex: '男',
        hobbies: [],
        intro: ''
      }
    }
  }

  // 获取表单数据
  setValue = evt => {
    let value = evt.target.value
    let name = evt.target.name
    let type = evt.target.type
    if ('checkbox' === type) {
      // hobbies 数组
      let tmpValue = this.state.userinfo[name]
      tmpValue.push(value)
      this.setState(state => state.userinfo[name] = tmpValue)
    } else {
      this.setState(state => state.userinfo[name] = value)
    }
  }

  // 表单提交
  dopost = () => {
    // 获取表单数据
    let { userinfo } = this.state
    // 表单验证
    let { isvalid, errors } = addUserValidate(userinfo)

    if (isvalid) { // 表单验下通过
      this.props.addUser(userinfo)
      this.props.history.push('/')

    } else {
      // 有错了，把错误信息更新到状态数据中
      this.setState({
        errors
      })
    }

  }



  render() {
    let { userinfo, hobbies, errors } = this.state
    return (
      <div className="container">
        <form>
          <div className="form-group">
            <label>账号：
              <input type="text" name="username" className="form-control" value={userinfo.username} onChange={this.setValue} />
            </label>
            {errors.username && <span style={{ color: 'red', marginLeft: '10px' }}>{errors.username}</span>}
          </div>
          <div className="form-group">
            <label>密码：
              <input type="text" name="password" className="form-control" value={userinfo.password} onChange={this.setValue} />
            </label>
            {errors.password && <span style={{ color: 'red', marginLeft: '10px' }}>{errors.password}</span>}
          </div>
          <div className="form-group">
            <div>性别：</div>
            <div className="radio">
              <label>
                <input type="radio" name="sex" value='男' checked={userinfo.sex === '男' ? true : false} onChange={this.setValue} />
              男
            </label>
            </div>
            <div className="radio">
              <label>
                <input type="radio" name="sex" value='女' checked={userinfo.sex === '女' ? true : false} onChange={this.setValue} />
              女
            </label>
            </div>
          </div>
          <div className="form-group">
            <div>爱好：</div>
            {
              hobbies.map((item, index) => {
                return (
                  <div className="checkbox" key={'hobbies_' + index}>
                    <label>
                      <input type="checkbox" name="hobbies" value={item} onChange={this.setValue} />{item}
                    </label>
                  </div>
                )
              })
            }
          </div>
          <div className="form-group">
            <div>简介</div>
            <textarea className="form-control" name="intro" rows="3" value={userinfo.intro} onChange={this.setValue}></textarea>
          </div>

          <button type="button" onClick={this.dopost} className="btn btn-success">添加用户</button>
        </form>

      </div>
    )
  }
}

export default Add